<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link href="../css/index-clear.css" rel="stylesheet" type="text/css">
    <link href="../css/index-top.css" rel="stylesheet" type="text/css">
    <link href="../css/register.css" rel="stylesheet" type="text/css">
    <link href="../css/policy-footer.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="top">
        <div class="top-center">
            <div class="top-center-left">
            </div>
            <div class="top-center-right">
                <!-- <a href="shoppingCart.html" class="shopping-cart">我的购物车</a> -->
                <a href="../index.html">返回首页</a>
            </div>
        </div>
    </div>
    <div class="container">
        <h2>用户注册</h2>
        <form id="register-form">
            <div class="form-group">
                <label for="reg-username">用户名</label>
                <input type="text" id="reg-username" placeholder="请输入用户名">
                <p class="error-message" id="reg-username-error"></p>
            </div>

            <div class="form-group">
                <label for="reg-password">密码</label>
                <input type="password" id="reg-password" placeholder="请输入密码">
                <p class="error-message" id="reg-password-error"></p>
            </div>

            <div class="form-group">
                <label for="reg-confirm-password">确认密码</label>
                <input type="password" id="reg-confirm-password" placeholder="请再次输入密码">
                <p class="error-message" id="reg-confirm-password-error"></p>
            </div>

            <div class="form-group">
                <label for="reg-email">电子邮箱</label>
                <input type="text" id="reg-email" placeholder="请输入电子邮箱">
                <p class="error-message" id="reg-email-error"></p>
            </div>

            <div class="form-group">
                <label>性别</label>
                <div>
                    <input type="radio" id="gender-male" name="gender" value="male">
                    男

                    <input type="radio" id="gender-female" name="gender" value="female">
                    女

                    <input type="radio" id="gender-other" name="gender" value="other">
                    其他
                </div>
                <p class="error-message" id="gender-error"></p>
            </div>

            <div class="form-group">
                <label for="reg-birthday">生日</label>
                <input type="date" id="reg-birthday">
            </div>

            <div class="form-group">
                <label>爱好</label>
                <div>
                    <input type="checkbox" id="hobby-reading" name="hobbies" value="reading">
                    阅读

                    <input type="checkbox" id="hobby-cooking" name="hobbies" value="cooking">
                    烹饪

                    <input type="checkbox" id="hobby-travel" name="hobbies" value="travel">
                    旅行
                </div>
            </div>

            <div class="form-group">
                <label for="reg-address">收货地址</label>
                <textarea id="reg-address" rows="3" placeholder="请输入收货地址"></textarea>
            </div>

            <div class="form-group">
                <button type="submit">注册</button>
            </div>
        </form>

        <div class="links">
            <a href="登录.html">已有账号？立即登录</a>
        </div>
    </div>
    <script src="../js/register.js"></script>

    <footer>
        <div class="footer-container">
            <!-- 公司信息 -->
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>我们致力于提供高质量的产品和服务，满足客户的需求。</p>
                <div class="social-links">
                    <a href="#" title="微博"><span class="icon icon-weibo"></span></a>
                    <a href="#" title="微信"><span class="icon icon-wechat"></span></a>
                    <a href="#" title="Twitter"><span class="icon icon-twitter"></span></a>
                    <a href="#" title="LinkedIn"><span class="icon icon-linkedin"></span></a>
                </div>
            </div>

            <!-- 快速链接 -->
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>

            <!-- 联系方式 -->
            <div class="footer-section">
                <h3>联系方式</h3>
                <ul>
                    <li><span class="icon icon-map-marker"></span>美国白宫大厦A座1001室</li>
                    <li><span class="icon icon-phone"></span>400-123-4567</li>
                    <li><span class="icon icon-envelope"></span>特朗普@关税double.com</li>
                </ul>
            </div>

            <!-- 法律信息 -->
            <div class="footer-section">
                <h3>法律信息</h3>
                <ul>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">Cookie政策</a></li>
                    <li><a href="#">法律声明</a></li>
                </ul>
            </div>
        </div>

        <div class="copyright">
            <p>&copy; 2025 美国退堂鼓信息技术有限公司. 保留所有权利.</p>
        </div>
    </footer>
</body>

</html>